<template>
  <div >
    <div id="printTest">
      <div  v-for="item in data" :key="item.code"  style="page-break-after:always">
        <div class="picking">
          <div class="text-center">{{item.groupName}}</div>
          <div class="text-center">拣货单</div>
          <div class="f14 order-container">
            <div class="bar-code">
              <barCode :text="item.wavePickingCode" />
            </div>
            <div class="order-info">
              <span>总订单：{{item.deliveryNum}}</span>
              <span class="mtb4">sku数：{{item.goodsSortQuantity}}</span>
              <span>商品总数量：{{item.planQuantity}}</span>
            </div>
          </div>
          <div class="f14 order-item" style="margin-top: 0;">
            <span class="w60">入驻商：{{item.shipmentName}}</span>
            <span>拣货单号：{{item.code}}</span>
          </div>
          <div class="f14 order-item">
            <span class="w60">仓库：{{item.warehouseName}}</span>
            <span>订单日期：{{item.gmtCreated.substring(0,10)}}</span>
          </div>
          <div class="f14 order-item" style="margin-bottom: 2%;">
            <span class="w60">备注：{{item.remarks}}</span>
            <span>打印时间：{{date}}</span>
          </div>
        </div>

        <div style="width: 98%;border:1px solid #000000;margin: 0 auto;height:100%;">
          <div style="display: flex;justify-content: center;align-items: center;height:30px;border-bottom: 1px solid #000000;">
            <div style="height:100%;width:4%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">序号</div>
            <div style="height:100%;width:12%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">商品条码</div>
            <div style="height:100%;width:23%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">商品名称</div>
            <div style="height:100%;width:12%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">库位</div>

            <div style="height:100%;width:8%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">待拣数量</div>
            <div style="height:100%;width:41%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">拣货顺序</div>
          </div>
          <div style="display: flex;justify-content: center;border-bottom: 1px solid #000000;height:100%;word-break:break-all;min-height:30px;" v-for="(i, idx) in item.pickingItemWithRegisterVOList" :key="i.id">
            <div style="width:4%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{ idx+1 }}</div>
            <div style="width:12%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{i.goodsBarCode}}</div>
            <div style="width:23%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{i.goodsName}}</div>
            <div style="width:12%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{i.locationName}}</div>
            <div style="width:8%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{i.distributionQuantity}}</div>
            <div style="width:41%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{i.deliveryOrderNum}}</div>
          </div>
        </div>
        <div style="margin-top:1%; margin-bottom:5%">
          <span style="margin-left:1%">拣货员：</span>
          <span style="margin-left:40%">操作员：</span>
          <span style="margin-left:30%">复核员：</span>
        </div>

      </div>
    </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-print="'#printTest'" @click="handlePrintSeq">打 印</el-button>
      </div>
</div>
</template>
<script>
import barCode from './barCode'
import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
import XEUtils from 'xe-utils'
import VXEUtils from 'vxe-utils'
import { printSeq } from '@/api/outStorage'
import moment from 'moment'
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
import { batchPickSortCount } from '@/api/outStorage'
  export default {
    components: {
      barCode
    },
    props: {
      printData: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        form:{
          warehouseName: '',
          code: '',
          typeName:'',
          gmtCreated: '',
          remarks: ''
        },
        printDate:'',
        inboundQuantityTotal:0,
        data:[],
        date:'',
        partys:[],
        tableData:[],
      }
    },
    created(){
      this.date = moment().format('YYYY-MM-DD HH:mm:ss')
      this.showPrintList()
    },
    methods:{
      showPrintList() {
        this.printData.forEach(i => {
          printSeq(i).then(response => {
            this.data.push(response.data)
          })
        });
      },
      handlePrintSeq() {
        // batchPickSortCount(this.printData.join(','))
        this.$confirm('刚才打印成功了吗？', '提示', {
          type: 'success',
          iconClass: 'el-icon-question',
          closeOnClickModal: false,
          closeOnPressEscape: false,
          confirmButtonText: '成功了',
          cancelButtonText: '没打印'
        })
          .then(() => {
            batchPickSortCount(this.printData).then((res)=>{
              this.$emit('finshPrint', res)
            })
          })
          .catch(() => {})
      }
    }
  }
</script>
<style lang="scss" scoped>
  @page{
    size: auto A4 landscape;
    margin: 3mm;
  }

  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
    font-size: 16px;
    font-weight: bolder;
  }

  .order-container {
    display: flex;
    .bar-code {
      margin-right: 140px;
    }
    @media print {
      .bar-code{
        margin-right: 90px;
      }
    }
    .order-info {
      display: flex;
      flex-direction: column;
    }
    .mtb4 {
      margin: 4px 0;
    }
  }
  .f14 {
    font-size: 14px;
  }
  .w60{
    width: 56.5%;
  }
  </style>

<style lang="scss" scoped>
#printTest{
  width:100%;
  font-size: 5px;
    .vxe-cell{
      font-weight:normal;
      font-size: 3px !important;
  }

}

  .tittle{
    display: flex;
    justify-content: center;
    align-items: center;

    .tittle-content{
      width: 33%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
.picking{
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 18px;
  margin: 0 auto;
  > div {
    margin-top: 1%;
  }
  .order-item {
    display: flex;
    margin-left: 10px;
  }
}

  .middleBottom{
    width:100%;
    min-height:90px;
    border:1px solid #000000;
    margin: 0 auto;
    display: flex;
    .middleBottom-left{
      width: 16.7%;
      color: #000000;
      border-right:1px solid #000000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .middleBottom-right{
       width: 95%;
      .middleBottom-right-top{
        display: flex;
        justify-content: center;
        align-items: center;
        height:30px;
        border-bottom: 1px solid #000000;
        .middleBottom-right-top-content{
          height:100%;
          width:15%;
          border-right:1px solid #000000;
          text-align:center;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .middleBottom-right-middle{
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #000000;
        height:30px;
        .middleBottom-right-middle-content{
            height:100%;
            width:15%;
            border-right:1px solid #000000;
            text-align:center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
      }
      .middleBottom-right-bottom{
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #000000;
        height:30px;
        .middleBottom-right-bottom-content{
            height:100%;
            width:15%;
            border-right:1px solid #000000;
            text-align:center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

      }
    }
  }
</style>
